<template>
  <div class="online">
    <van-sticky>
      <van-nav-bar title="在线咨询" left-arrow @click-left="back" />
    </van-sticky>
    <div class="content">
      <p class="tips">工作人员会在两小时内与你您联系</p>
      <div class="msg_me" v-for="(item,index) in list" :key="index">
        <p class="text" v-if="item.type == 'text'">{{item.message}}</p>
        <img v-if="item.type == 'pic'" style="width:2rem;flex:none" :src="item.url" alt="">
        <span class="type" v-if="item.type == 'file' && file[fileType(item.url)] == 'no'">{{type}}</span>
        <p class="file" v-if="item.type == 'file'">
          <img :src="file[fileType(item.url)]" alt="">
          {{item.url}}
        </p>
        <div class="head">
          <img v-if='my.avatarFile' style="width: 100%; height: 100%; border-radius: 50%;" :src="my.avatarFile.uriPath" alt="">
        </div>
      </div>
    </div>
    <div class="footer_input">
      <div class="row-between-center">
        <textarea style="margin-left: 0.3rem;" @blur="blur()" v-model="form.message" name="" maxlength="300" id=""></textarea>
        <!-- <span class="icon_moj"></span> -->
        <p class='enter' @click="send">发送</p>
      </div>
      <div class="other">
        <div class="pic">
          <input type="file" @change="sendPic" id="upPic">
        </div>
      </div>
    </div>
    <div class="showBIg" v-if="showBig" @click="showBig=false">
      <iframe :src="showSrc"> </iframe>
    </div>
  </div>
</template>

<script>
import api from 'api/api'
export default {
  data () {
    return {
      list: [],
      form: {
        message: '',
        fileId: '',
        goodId: this.$route.params.id
      },
      file: {
        zip: require('../../assets/img/zip.png'),
        mp3: require('../../assets/img/mp3.png'),
        mp4: require('../../assets/img/mp4.png'),
        pdf: require('../../assets/img/pdf.png'),
        ppt: require('../../assets/img/ppt.png'),
        word: require('../../assets/img/word.png'),
        excel: require('../../assets/img/excel.png'),
        no: require('../../assets/img/type_no.png')
      },
      type:'',
      my: {},
      showBig: false,
      showSrc: ''
    }
  },
  computed: {

  },
  created () {
    this.my = JSON.parse(localStorage.getItem('my')) || {}
  },
  methods: {
    showFile (file) {
      this.showBig = true
      this.showSrc = file
    },
    fileType (name) {
      var na = name.split('.')
      var n = na[1]
      this.type = n
      if (['jpg', 'png', 'jpeg', 'gif'].includes(n)) {
        return 'image'
      }
      if (['rar', 'zip'].includes(n)) {
        return 'zip'
      }
      if (['mp3'].includes(n)) {
        return 'mp3'
      }
      if (['mp4'].includes(n)) {
        return 'pm4'
      }
      if (['pdf'].includes(n)) {
        return 'pdf'
      }
      if (['doc','docx','wps','txt'].includes(n)) {
        return 'word'
      }
      if (['ppt','pptx'].includes(n)) {
        return 'ppt'
      }
      if (['xls','xlsx'].includes(n)) {
        return 'excel'
      }
      return 'no'
    },
    back () {
      window.history.go(-1)
    },
    sendPic () {
      var file = document.getElementById('upPic').files
      var form = new FormData()
      form.append('file', file[0])
      var obj = JSON.parse(localStorage.getItem('userInfor'))
      form.append('accessToken', obj.accessToken)
      form.append('path', 'online/chat')
      api.upload(form).then(res => {
        this.form.fileId = res.data.fileId
        var type = res.data.filePath.split('.')
        var obj = {
          type: ['jpg', 'png', 'gif', 'jpeg'].includes(type[1]) ? 'pic' : 'file',
          url:  ['jpg', 'png', 'gif', 'jpeg'].includes(type[1]) ?  res.data.filePath :  res.data.fileName,
        }
        console.log(type)
        this.list.push(obj)
        api.userConsultation({
          data: this.form
        }).then(res => {
          this.$toast(res.data.message)
         
        })
      })
    },
    send () {
      if (this.form.message == "") {
        this.$toast('发送消息不能为空')
        return;
      }
      var obj = {
        type: 'text',
        message: this.form.message
      }
      this.list.push(obj)
      console.log(this.list)
      api.userConsultation({
        data: this.form
      }).then(res => {
        this.$toast(res.data.message)
        this.form.message = ''
        this.form.fileId = ''
      })
    },
    blur () {
      setTimeout(function () {
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
      }, 100)

    },
  }
}
</script>

<style lang="scss">
.online {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 0.3rem;
  .content {
    // overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 79vh;
    padding-bottom: 2rem;
  }
  .enter {
    width: 1.2rem;
    height: 0.45rem;
    text-align: center;
    // background: red;
    height: 0.45rem;
    float: right;
  }
  .msg_me {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin-top: 0.25rem;
    position: relative;
    .type{
      position: absolute;
      left: .2rem;
      right: .2rem;
      color: #fff;
      font-size: .32rem;
    }
    .text {
      max-width: 3.77rem;
      min-height: 0.8rem;
      background: rgba(52, 138, 255, 1);
      border-radius: 8px;
      padding: 0.2rem 0.25rem;
      color: #fff;
      font-size: 0.3rem;
      flex: none;
      text-align: left;
      position: relative;
      word-break: break-all;
      &::after {
        position: absolute;
        right: -0.2rem;
        margin-top: -0.1rem;
        top: 50%;
        content: "";
        width: 0;
        height: 0;
        border-width: 0.1rem;
        border-style: solid;
        border-color: transparent transparent transparent rgba(52, 138, 255, 1);
        display: block;
      }
    }
    .head {
      width: 0.8rem;
      height: 0.8rem;
      // background-color: #ffff;
      border-radius: 50%;
      margin: 0 0.3rem;
      background-image: url(../My/set/touxaing-moren.png);
      background-size: 100% 100%;
      flex: none;
    }
    .file {
      display: flex;
      align-items: top;
      position: relative;
      max-width: 4.77rem;
      min-height: 0.8rem;
      background: #fff;
      border-radius: 8px;
      padding: 0.2rem 0.25rem;
      color: #333;
      font-size: 0.3rem;
      flex: none;
      text-align: left;
      position: relative;
      word-break: break-all;
      align-items: flex-start;
      &::after {
        position: absolute;
        right: -0.2rem;
        margin-top: -0.1rem;
        top: 50%;
        content: "";
        width: 0;
        height: 0;
        border-width: 0.1rem;
        border-style: solid;
        border-color: transparent transparent transparent #fff;
        display: block;
      }
      img {
        width: 0.5rem;
        // height: 0.5rem;
        margin-right: 0.2rem;
        display: block;
        flex: none;
      }
    }
  }
  .footer_input {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    padding: 0.15rem 0rem 0.2rem 0rem;
  }
  .icon_jp {
    width: 0.53rem;
    height: 0.53rem;
    background-image: url("../../assets/img/home/jianpan.png");
    background-size: cover;
    margin-right: 0.1rem;
  }
  .icon_moj {
    width: 0.53rem;
    height: 0.53rem;
    background-image: url("../../assets/img/home/emoji.png");
    background-size: cover;
    margin-left: 0.1rem;
  }
  textarea {
    width: 4.9rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background: rgba(245, 245, 245, 1);
    border-radius: 0.08rem;
    padding: 0 0.3rem;
    border: none;
  }
  .tips {
    font-size: 0.22rem;
    color: #999;
    padding: 0.3rem 0;
  }
  .other {
    padding: 0.3rem;
    display: flex;
    .pic {
      width: 1.24rem;
      height: 1.24rem;
      margin-right: 0.64rem;
      background: url("../../assets/img/photo.png");
      background-size: 100%;
      position: relative;
      input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
    .file {
      width: 1.24rem;
      height: 1.24rem;
      background: url("../../assets/img/file.png");
      background-size: 100%;
      position: relative;

      input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
  .showBIg {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 999;
  }
}
</style>